<template>
  <div class="rankWrap">
    <goback :title="'RANK'"></goback>
    <div class="content">
      <div class="tabWrap">
        <p
          @click.stop="dataTypeChange(1)"
          :class="dataType == 1 ? 'active' : ''"
        >
          Like
        </p>
        <p
          @click.stop="dataTypeChange(2)"
          :class="dataType == 2 ? 'active' : ''"
        >
          Wealth
        </p>
      </div>
      <div class="contentTop">
        <div class="top3">
          <div
            :class="
              index == 0
                ? 'li licenter'
                : index == 1
                ? 'li left'
                : index == 2
                ? 'li right'
                : 'li'
            "
            v-for="(item, index) in pageArrTop"
            :key="index"
          >
            <img :src="item.avatar ? item.avatar : headerDefaultPic" alt="" />
            <p>{{ item.nickName }}</p>
            <div class="hearts">
              <img v-if="dataType == 1" :src="heart" alt="" />
              <img v-else :src="huangguan" alt="" />
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
        <img class="lingzuo" :src="imgBg" alt="" />
        <div class="listLast">
          <div class="li" v-for="(item, index) in pageArrLast" :key="index">
            <div class="left">
              <span>{{ item.sort }}</span>
              <img :src="item.avatar ? item.avatar : headerDefaultPic" />
              <p>{{ item.nickName }}</p>
            </div>
            <div class="right">
              <img v-if="dataType == 1" :src="heart" alt="" />
              <img v-else :src="huangguan" alt="" />
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="li self">
        <div class="left">
          <span>{{ selfData.sort > 0 ? selfData.sort : "" }}</span>
          <img :src="selfData.avatar" alt="" />
          <p>{{ selfData.nickName }}(ME)</p>
        </div>
        <div class="right">
          <img v-if="dataType == 1" :src="heart" alt="" />
          <img v-else :src="huangguan" alt="" />
          <span>{{ selfData.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { remNumber } from "../../../utils/remset";

export default {
  name: "rank",
  data() {
    return {
      headerDefaultPic: require("@/assets/imgs/index/defaultPic.png"),
      dataType: 1,
      imgBg: require("@/assets/imgNews/percenter/rank/ph.png"),
      heart: require("@/assets/imgNews/percenter/rank/redHeart.png"),
      huangguan: require("@/assets/imgNews/percenter/rank/huangguan.png"),

      selfData: {},
      // pageArr: [],
      pageArrTop: [],
      pageArrLast: []
    };
  },
  computed: mapState({
    userStoreData: state => state.user
  }),
  methods: {
    dataTypeChange(dataType) {
      let zs = this;
      this.dataType = dataType;
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      zs.api.userController
        .userLeteaderboardGet({
          userId: zs.userStoreData.userId,
          type: dataType
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code == 200) {
            let pageArr = res.data.data.leaderBoard;
            zs.selfData = res.data.data.owner || {};
            zs.pageArrTop = pageArr.splice(0, 3);
            zs.pageArrLast = pageArr;
          } else {
            zs.$toast("Try again latter");
          }
        });
    }
  },
  mounted() {
    this.dataTypeChange(1);
  }
};
</script>

<style scoped lang="less">
.rankWrap {
  color: #000;
  background: linear-gradient(180deg, #00b1ff 0%, #0089ff 100%);
  .content {
    padding-top: 1.52rem;
    min-height: 100vh;
    box-sizing: border-box;
    .tabWrap {
      background-color: rgba(0, 110, 204, 1);
      width: 5rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      margin: 0 auto 0.35rem;
      background: #006ecc;
      opacity: 1;
      border-radius: 1rem;
      display: flex;
      justify-content: space-between;
      padding: 0.05rem;
      box-sizing: border-box;
      p {
        width: 2.4rem;
        height: 0.7rem;
        border-radius: 0.4rem;
        font-size: 0.28rem;

        font-weight: bold;
        color: rgba(144, 221, 255, 1);
        opacity: 1;
        &.active {
          width: 2.4rem;
          height: 0.7rem;
          line-height: 0.7rem;
          background: linear-gradient(270deg, #feed55 0%, #ffc400 100%);
          opacity: 1;
          border-radius: 0.35rem;
          color: #663929;
        }
      }
    }

    .contentTop {
      .top3 {
        position: relative;
        width: 6rem;
        height: 2.48rem;
        margin: 0.35rem auto;
        .li {
          position: absolute;
          width: 2rem;
          left: 50%;
          top: 0;
          transform: translate(-50%, 0);
          &.left {
            left: 0;
            transform: translate(0, 0);
            padding-top: 0.6rem;
          }
          &.center {
          }
          &.right {
            left: 4rem;
            transform: translate(0, 0);
            padding-top: 1.2rem;
          }
          & > img {
            width: 1.2rem;
            height: 1.2rem;
            object-fit: cover;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 0.1rem;
            background-color: rgba(255, 0, 0, 0.25);
          }
          p {
            font-size: 0.24rem;

            font-weight: bold;
            line-height: 0.33rem;
            height: 0.33rem;
            color: #f3f3f3;
            opacity: 1;
            text-align: center;
          }
          .hearts {
            display: flex;
            margin: 0.1rem auto 0;
            justify-content: center;
            img {
              width: 0.3rem;
              height: 0.3rem;
              padding: 0 0 0.03rem;
            }
            span {
              height: 0.33rem;
              font-size: 0.24rem;

              font-weight: bold;
              line-height: 0.33rem;
              color: #f3f3f3;
              opacity: 1;
              padding-left: 0.1rem;
            }
          }
          &:nth-child(1) {
            //padding-top: 0.6rem;
          }
          &:nth-child(3) {
            //padding-top: 1.2rem;
          }
        }
      }
      .lingzuo {
        width: 6rem;
        height: 3rem;
        margin: 0 auto;
      }
      .listLast {
        padding: 0.1rem 0.4rem 1rem;
        border-top-left-radius: 0.4rem;
        border-top-right-radius: 0.4rem;
        background-color: rgba(255, 255, 255, 0.95);
        min-height: calc(100vh - 8.15rem);
        box-sizing: border-box;
        .li {
          display: flex;
          justify-content: space-between;
          padding: 0.2rem 0;
          .left {
            display: flex;
            justify-content: flex-start;
            span {
              display: block;
              padding-right: 0.5rem;
              height: 0.6rem;
              line-height: 0.6rem;
              font-size: 0.28rem;

              font-weight: bold;
              color: #999999;
              opacity: 1;
            }
            img {
              height: 0.6rem;
              width: 0.6rem;
              border-radius: 50%;
              overflow: hidden;
            }
            p {
              padding-left: 0.24rem;
              height: 0.6rem;
              line-height: 0.6rem;
              font-size: 0.24rem;

              font-weight: bold;
              color: #333333;
              opacity: 1;
            }
          }
          .right {
            display: flex;
            justify-content: flex-end;
            img {
              width: 0.3rem;
              height: 0.3rem;
              padding: 0.15rem 0.1rem;
            }
            span {
              display: block;
              padding-right: 0.5rem;
              height: 0.6rem;
              line-height: 0.6rem;
              font-size: 0.24rem;

              font-weight: bold;
              color: #333333;
              opacity: 1;
            }
          }
        }
      }
    }
    .li.self {
      display: flex;
      justify-content: space-between;
      padding: 0.2rem 0.4rem;
      background-color: rgba(255, 255, 255, 1);
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
      .left {
        display: flex;
        justify-content: flex-start;
        span {
          display: block;
          padding-right: 0.5rem;
          height: 0.6rem;
          line-height: 0.6rem;
          font-size: 0.28rem;

          font-weight: bold;
          color: #999999;
          opacity: 1;
        }
        img {
          height: 0.6rem;
          width: 0.6rem;
          border-radius: 50%;
          overflow: hidden;
        }
        p {
          padding-left: 0.24rem;
          height: 0.6rem;
          line-height: 0.6rem;
          font-size: 0.24rem;

          font-weight: bold;
          color: #333333;
          opacity: 1;
        }
      }
      .right {
        display: flex;
        justify-content: flex-end;
        img {
          width: 0.3rem;
          height: 0.3rem;
          padding: 0.15rem 0.1rem;
        }
        span {
          display: block;
          padding-right: 0.5rem;
          height: 0.6rem;
          line-height: 0.6rem;
          font-size: 0.24rem;

          font-weight: bold;
          color: #333333;
          opacity: 1;
        }
      }
    }
  }
}
</style>
